<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
     
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.company" placeholder="公司名称"></el-input>
                    </el-form-item>
                     <el-form-item label="">
                            <el-date-picker
                                v-model="time1"
                                type="date"
                                placeholder="选择开始日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                        <!-- <el-date-picker v-model="formInline.time1" type="datetime" placeholder="选择开始时间">
                        </el-date-picker> -->
                     </el-form-item>
                     <el-form-item label="">
                         <el-date-picker
                                v-model="time2"
                                type="date"
                                placeholder="选择结束时间"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                                </el-date-picker>
                       
                     </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row style="width: 100%;">
                <el-table-column label="公司名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.company }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账单时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.applytime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="账单金额">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.trafficinfo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="已支付">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.passengernum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="未支付">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.applytime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出账时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state | state }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="$router.push({path:'billDetail',query:{id:scope.row.id,from:'orderBill',name:scope.row.name}})">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="orderPage.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-row>

    </div>
</template>
<script>

export default {
    data() {
        return {
            time1:'',
            time2:'',
            formInline: {
                time1:''
            },

            total: 1,
            tableData: [],
            orderPage: {
                pageNo: 1,
                pageSize: 10,
            },
        }
    },
  
        
   
    created() {
        this.orderList();
    },
    methods: {
        formatDate(t) {
            var str = t;
            str = str.replace(/-/g,'/');
            var date = new Date(str);
            var time = date.getTime()/1000;
            return time;
        },
        orderList() {
            this.listLoading = true;
            var obj = {
                data: {
                    company: this.formInline.company,
                    startTime:this.time1!=""?this.formatDate(this.time1):'',
                    endTime:this.time2!=""? this.formatDate(this.time2):'',
                    pageNo: this.orderPage.pageNo,
                    pageSize: this.orderPage.pageSize,
                }
            };
            this.$http('/sys/listBill', obj).then(resp => {
                console.log(resp)
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                }
                this.listLoading = false;
            })
        },
        handleCurrentChange(val) {
            this.orderPage.pageNo = val;
            this.orderList();
        },
        onSubmit() {
            this.orderList();
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        }
    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}
</style>
